<template>
  <div v-if="partListCon">
    <el-form ref="form" :model="partListCon" label-width="110px" size="small">
      <el-form-item label="是否显示">
        <el-switch
          class="zdySwith"
          :width="82"
          :value="partListCon.show"
          active-color="#13ce66"
          @change="updateInput($event, 'show')"
          inactive-color="#ffffff"
          active-text="显示"
          inactive-text="隐藏"
          active-value="1"
          inactive-value="0"
        ></el-switch>
      </el-form-item>

      <el-form-item label="标题">
        <el-input
          @input="updateInput($event, 'title')"
          :value="partListCon.title"
          placeholder="请输入标题"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="副标题">
        <el-input
          @input="updateInput($event, 'title_en')"
          :value="partListCon.title_en"
          placeholder="请输入副标题"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="展示模式">
        <el-select
          v-model="partListCon.style"
          placeholder="请选择"
          @change="updateInput($event, 'style')"
        >
          <el-option label="展示单个" value="0"></el-option>
          <el-option label="展示全部" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-divider></el-divider>
      <el-form-item label="选择场次" v-if="partListCon.style == 0">
        <el-select
          :value="partListCon.text"
          placeholder="请选择场次"
          @change="changeselect($event)"
        >
          <el-option
            v-for="(item, i) in limitdata"
            :key="i"
            :label="item.desc"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
export default {
  data() {
    return {
      limitdata: [],
      currentPage1: 1,
      pageSize: 10,
    };
  },
  computed: {
    ...mapGetters(["partListConConss"]),
    ...mapState({
      active: (state) => state.modulePage.active,
      activeBnnerIndex: (state) => state.modulePage.bannerNowIndex,
      allbanner: (state) => state.modulePage.allbanner,
    }),
    partListCon() {
      if (this.activeBnnerIndex >= 0) {
        return this.allbanner[this.activeBnnerIndex];
      } else {
        return {};
      }
    },
  },
  components: {},
  created() {
    this.getlimit();
  },
  mounted() {},
  methods: {
    getTimeFormat(time) {
      if (time == "0" || time == "0000") {
        return "----";
      }
      time = time + "";
      var date = "";
      if (time.length >= 13) {
        date = new Date(parseInt(time));
      } else {
        date = new Date(parseInt(time + "000"));
      }
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      var h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    },
    changeselect(e) {
      this.limitdata.forEach((item, i) => {
        if (item.id == e) {
          this.$store.commit("set_sonbanner_name", {
            key: this.activeBnnerIndex,
            name: "text",
            val: item.id,
          });
          this.$store.commit("set_sonbanner_name", {
            key: this.activeBnnerIndex,
            name: "links",
            val: `${this.getTimeFormat(item.begin_time)}-${this.getTimeFormat(
              item.end_time
            )}`,
          });
          var params = {};
          params = this.searchobj;
          params = {
            page: 1,
            page_size: 10,
            time_id: item.id,
            types: 7,
          };
          this.$api.getShops.getShopsList(params).then((res) => {
            if (res.data.code == 200) {
              this.$store.commit("set_sonbanner_name", {
                key: this.activeBnnerIndex,
                name: "banner",
                val: res.data.result.data || [],
              });
            }
          });
        }
      });
    },
    getlimit() {
      var params = {
        page: 1,
        page_size: 50,
      };
      this.$api.getShops.get_limittime(params).then((res) => {
        if (res.data.code == 200) {
          this.limitdata = [];

          res.data.result.forEach((item, i) => {
            if (this.partListCon && this.partListCon.text != "") {
              this.$store.commit("set_sonbanner_name", {
                key: this.activeBnnerIndex,
                name: "text",
                val: item.id,
              });
              this.$store.commit("set_sonbanner_name", {
                key: this.activeBnnerIndex,
                name: "links",
                val: `${this.getTimeFormat(
                  item.begin_time
                )}-${this.getTimeFormat(item.end_time)}`,
              });
            }
            var obj = item;
            obj.desc = `${this.getTimeFormat(
              item.begin_time
            )}-${this.getTimeFormat(item.end_time)}`;
            this.limitdata.push(obj);
          });
        }
      });
    },
    updateInput(val, name) {
      this.$store.commit("set_sonbanner_name", {
        key: this.activeBnnerIndex,
        name: name,
        val: val,
      });

      if (val == 1 && name == "style") {
        this.$store.commit("set_sonbanner_name", {
          key: this.activeBnnerIndex,
          name: "text",
          val: val,
        });
      }
    },
  },
  watch: {},
};
</script>

<style scoped lang="less"></style>
